<template>
  <div class="home">
    <!-- 头部 -->
    <div class="home-header">
      <div class="home-header-img"></div>
      <div class="home-header-title">青绿</div>
      <div class="home-header-line"></div>
      <div class="home-header-description">绿色科技助力可持续发展</div>
    </div>

    <!-- 大搜索 -->
    <div class="home-search">
      <div v-if="change" class="home-search-type-1">
        <div class="home-search-type-1-style-1">
          <div class="bk"><div class="type-1">查企业</div></div>
          <div class="sj"></div>
        </div>
        <div class="home-search-type-1-style-2">
          <div @click="()=> change=!change" class="bk"><div class="type-1">查处罚</div></div>
          <div class="sj"></div>
        </div>
      </div>
      <div v-if="!change" class="home-search-type-2">
        <div class="home-search-type-2-style-1">
          <div @click="()=> change=!change" class="bk"><div class="type-1">查企业</div></div>
          <div class="sj"></div>
        </div>
        <div class="home-search-type-2-style-2">
          <div class="bk"><div class="type-1">查处罚</div></div>
          <div class="sj"></div>
        </div>
      </div>
      <search v-if="change" :width="764" v-model="searchKey" placeholder="请输入企业名称关键词"
        :suffixIcon="{ icon: '' }" :popoverCfg="{ width: 764, offset: 0, showArrow: false }" :clearable="false">
        <template #suffix>
          <span class="search-button">查一下</span>
        </template>
      </search>
      <search v-if="!change" :width="764" v-model="searchKey" placeholder="请输入环保处罚关键词"
        :suffixIcon="{ icon: '' }" :hasPopover="false" :clearable="false">
        <template #suffix>
          <span class="search-button" @click="() => router.push({path:'/environmentCredit/environmentPenalties',query:{key:searchKey}})">查一下</span>
        </template>
      </search>
    </div>
    <!-- 热门专题 -->
    <div class="home-hot-modules">
      <div class="home-common-title">热门专题</div>
      <div class="home-hot-modules-info">
        <div v-for="item in hotModules" :key="item.name" class="hot-module" @click="() => router.push(item.push)">
          <vc-icon :icon="item.icon" :size="30" />
          <div class="module">
            <div class="name">{{ item.name }}</div>
            <div class="des">{{ item.description }}</div>
          </div>
          <div class="img" v-if="item.name=='环保处罚'"></div>
        </div>
      </div>
    </div>
    <div class="home-msg-company">
      <!-- 最新动态 -->
      <div class="home-new-msg">
        <div class="home-common-title">最新动态</div>
        <div class="home-new-msg-container" v-spin="Loading">
          <div class="msg-item" v-for="(item, index) in allData" :key="index">
            <div class="title" @click="setHrefUrlTool(item.fileType, item.fileUrl, item.id, item.bizType)">{{ item.title }}</div>
            <div class="label-groups">
              <div class="company" v-if="item.related && item.related.length > 0" @click="toF9(item.related[0].id)">
                {{ item.related[0].shortName || item.related[0].name }}
              </div>
              <div class="label" v-if="item.labels && item.labels.length > 0">
                {{ item.labels[0].name }}
              </div>
              <div class="time-source" align-left="auto">
                <span>{{ timeTrans(item.date)}}</span>
                <span v-if="item.source">{{' · '+ item.source }}</span>
                <!-- {{ timeTrans(item.date) }} · {{ item.source }} -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 热门企业 -->
      <div class="home-hot-company" v-spin="loading">
        <div class="home-common-title">热门企业</div>
        <div class="home-hot-company-container">
          <div class="company-item" v-for="item in hotCompanys" :key="item.id" @click="toF9(item.id)" :title="item.name">
            <div class="font-icon" :style="{background: colors[Math.floor(Math.random() * colors.length)]}">{{item.name.substring(0,1)}}</div><div class="company-name">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Search from '@/components/search/index.vue';
import { getHotCompany } from './apis';
import { setHrefUrlTool, timeTrans, toF9 } from '@/utils';
import {getEsgList} from "@/views/modules/news/apis";

const router = useRouter();
let change = ref(true)
let searchKey = ref('');
let colors = ref(['#F64C4C', '#00D086', '#6DABE3', '#7A7BF5', '#64AAEE']);
// 热门专题
interface IHotModules {
  name: string,
  description: string,
  icon: string,
  push: string
}
let hotModules = ref<IHotModules[]>([]);
hotModules.value = [
  {
    name: '绿色信贷',
    description: '最全绿色信贷数据',
    icon: 'vi-a-Group29408',
    push:'/greenCredit/greenCredit'
  },
  {
    name: '绿色企业',
    description: '6000余家绿色企业名单',
    icon: 'vi-lvseqiye',
    push:'/greenCertification/greenCompany'
  },
  {
    name: '环保处罚',
    description: '覆盖全国发布的环保处罚数据',
    icon: 'vi-a-Group26798',
    push:'/environmentCredit/environmentPenalties'
  }, {
    name: '环境信用',
    description: '企业、金融机构披露的环境信息',
    icon: 'vi-huanjingxinyong',
    push:'/environmentCredit/environmentCreditRate'
  },
  {
    name: '重点排污单位',
    description: '覆盖全国所有污染源数据',
    icon: 'vi-zhongdianpaiwudanwei',
    push:'/keyMonitor/keySewage'
  },
  {
    name: '全国碳履约',
    description: '年度碳配额清缴履约信息',
    icon: 'vi-quanguotanlvyue',
    push:'/environmentWeather/carbonCompliance'
  },
  {
    name: '碳排放',
    description: '上市公司碳排放数据',
    icon: 'vi-tanpaifang',
    push:'/environmentWeather/carbonEmission/ag'
  }, {
    name: 'ESG争议事件',
    description: '最全ESG争议事件披露',
    icon: 'vi-zhengyishijian',
    push:'esgEvent/event/ag'
  }
];

const { data: hotCompanys, loading } = useRequest(getHotCompany);

let queryData = $ref<any>({
    searchTxt: '',
    pageSize: 8,
    pageNum: 1
  });
let allData = $ref<any>([]);

const { loading:Loading } = useRequest(
  getEsgList(queryData).then((res) => {
    allData = allData.concat(res.items);
  })
);
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
